// 引入 echarts 核心模块
import * as echarts from "echarts/core";
// 按需引入图表类型
import { BarChart, PieChart,LineChart } from "echarts/charts";
// 按需引入标题，提示框组件
import { TitleComponent, TooltipComponent,GridComponent } from "echarts/components";
// 引入 Canvas 渲染器
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  BarChart,
  PieChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  CanvasRenderer,
  GridComponent
]);
// 饼图
export const pie_init = (title, echarts_dom, data) => {
  console.log(title, echarts_dom, data);
  var myChart = echarts.init(document.getElementById(echarts_dom));
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: "item",
      confine: true,
      formatter: "{b}: {c} ({d}%)",
    },
    // legend: {
    //   orient: "vertical",
    //   left: 10,
    //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
    // },
    series: [
      {
        name: title,
        type: "pie",
        radius: ["40%", "70%"],
        center: ["50%", "50%"],
        label: {
          show: false,
        },
        // labelLine: {
        //   length: 10, //第一段线长
        //   length2: 10, //第二段线长
        // },
        // label: {
        //   width: 98,
        // },
        // emphasis: {
        //   itemStyle: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowColor: "rgba(0, 0, 0, 0.5)",
        //   },
        // },
        data,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
// 柱状图
export const bar_init = (echarts_dom, xdata, ydata) => {
  // 基于准备好的echarts_dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(echarts_dom));
  // 指定图表的配置项和数据
  var option = {
    xAxis: {
      type: "category",
      data: xdata,
      show: false,
    },
    yAxis: {
      type: "value",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      top: "4%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    series: [
      {
        data: ydata,
        type: "bar",
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};

// 横版柱状图
export const transverse_bar_init = (echarts_dom, title, titil1, data) => {
  // 基于准备好的echarts_dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(echarts_dom));
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "23%",
      bottom: "3%",
      top: "5%",
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: "value",
      boundaryGap: [0, 0.01],
      axisLine: false,
    },
    yAxis: {
      type: "category",
      data: title,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: titil1,
        type: "bar",
        barWidth: "30%",
        data: data,
        itemStyle: {
          label: {
            show: true, //是否显示
            position: "right", //显示位置
            formatter: function (params) {
              //核心部分 formatter 可以为字符串也可以是回调
              if (params.name) {
                //如果当前值存在则拼接
                return params.name;
              } else {
                //否则返回个空
                return "";
              }
            },
          },
          color: "#409eff", //折线颜色设置
        },
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
// 折线图
export const line_init = (echarts_dom, title1, data1, title2, data2) => {
  // 基于准备好的echarts_dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(echarts_dom));
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: "category",
    },
    yAxis: {
      type: "value",
    },
    grid: {
      top: "4%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    series: [
      {
        name: title1,
        type: "line",
        smooth: 0.5,
        symbol: "none",
        color: ["#0480FB"],
        lineStyle: {
          color: "#0480FB",
          width: 2,
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(19, 78, 185, 0.5)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(62, 124, 235, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: data1,
      },
      {
        name: title2,
        type: "line",
        smooth: 0.5,
        symbol: "none",
        color: ["#00FFFF"],
        lineStyle: {
          color: "#00FFFF",
          width: 2,
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(62, 124, 235, 0.5)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(62, 124, 235, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: data2,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
